{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ocean Drugs</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">

   <link rel="stylesheet"  href="{% static 'css/bootstrap.min.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'public/font-awesome/css/font-awesome.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'css/all.min.css' %}" type="text/css" />



    <link rel="stylesheet"  href="{% static 'css/common.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'css/main.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'css/styles.css' %}" type="text/css" />

    <script type="text/javascript" src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.lazyload.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'public/layer/layer.js' %}"></script>
    <script type="text/javascript" src="{% static 'public/superslide/jquery.SuperSlide.2.1.3.js' %}"></script>

    <script type="text/javascript">
    {#var baseurl = "<?php echo $this->context->_baseUrl;?>";#
    </script>



</head>
<body>

{#  {% include 'header.html' %}#}
<header class="navbar navbar-inverse navbar-static" id="top"   v-loading="loading"  style="background-color: rgba(0, 0, 0, 0.23); ">
	    <div class="container">
	        <div id="main-nav-head" class="navbar-header">
                        <div class="flex-row f-j-start" style="width:100%">
                            <div class="flex" style="width:80px;padding:10px;">
                                <a href="/" class="" style="text-decoration: none;">
                                    <img src="{% static 'assets/images/logo.png' %}" alt="" style="display:block;width:100%;">
                                </a>
                            </div>
                            <div class="logoname flex-row justify-center" style="flex:1;">
                                <div class="flex items-center" style="color:#fff;font-size:16px;font-weight: bold">EMNPD</div>
                                <div class="flex items-center" style="margin-left:20px;color:#fff;font-size:13px;">Extensive Marine Natural Products Database</div>
                            </div>
                        </div>
	        </div>
	    </div>
	</header>
	<header class=" navbar-inverse navbar-static" id="top"  style="background-color: rgba(0, 0, 0, 0.23);border-color: #18516a; border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .1);">
	    <div class="container">


	        <div class="navbar-collapse  ">
	            <ul id="main-nav" class="nav navbar-nav navbar-main-menu nav" v-if="navs && navs.length > 0">
                <!-- 显示示例链接 -->

                     {% for item in navs %}
                    <li class="dropdown">
                        <a class="title" href="{{item.link}}">
                            {{ item.title }}
                            {% if item.children %}
                                <span class="caret"></span>
                            {% endif %}
                        </a>
                        {% if item.children %}
                        <ul class="dropdown-menu">
                            {% for child in item.children %}
                                <li><a href="{{item.link}}" ><span @click="redirect(child.link)">{{item.title}}</span></a></li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </li>
                    {% endfor %}



				</ul>

<div class="navsearch"  style="float:right;margin:15px 0">


       <form class=" navbar-form" action="/search" method="get" style="margin-top:0;box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);border:1px solid #ACC0E1;border-radius: 30px;">

                                           <div class="flex   "  style="">
                                                <div  class="flex-1" style="position: relative;border-radius: 4px; ">
                                                    <input type="hidden" name="type" value="extension">
                                                    <input type="text" class="form-control" style="height:28px;border:0;box-shadow:8px;
                                                    border:0;border-radius: 30px;
                                                    border-top-right-radius: 0;border-bottom-right-radius: 0;" name="keyword" v-model="keyword"
                                                     placeholder="Search …" autocomplete="off" aria-label="Search box">

                                                    </div>

                                                    <button   @click="submit()" type="button" class="searchbtn "
                                                    style="background:#ffffff;
                                                    background-repeat: no-repeat; background-size: 60%;
                                                    background-position: 30% 50%;
                                                     display:block; width: 30px;height:28px;box-shadow:none;border:0;
                                                     border-radius: 30px;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                                                    </button>
                                            </div>
   </form>
</div>



<style>
.navbar-form {margin:0;padding:0}
.navbar-form .form-control {
  background: rgba(255,255,255,0.9);
  border: 1px solid #e5e5e5;
}

.navbar-form .btn-primary {
  background: #1C2B4B;
  border: 1px solid #1C2B4B;
}

.navbar-form .btn-primary:hover {
  background: #2a406e;
}
.navbar-inverse .navbar-nav>li>.title{color:#ffffff;padding:10px 15px;line-height: 22px;
    /*padding-top: 29px;*/
    padding:15px;
    font-size:15px;
}

.navbar-nav {
        float: left;
        margin: 0;
    }

.navbar-nav li a:hover{
    padding:0;
    height:60px;
}
@media screen and (min-width: 1100px) {
    .navbar-nav>li>.title {
        color:#777;
        text-decoration: none;
        transition: none;
        margin-bottom: 0;
        padding-bottom: 0
    }

    .navbar-nav>li>.title:hover {
        padding-bottom: 0;
        color: #000000;
		/* font-weight: 700; */
        background-color: transparent;
        border-bottom: 1px solid #1C2B4B;
        {#border:1px solid #ff0000#}
    }

    .navbar-nav>.active>.title {
        color: #555;
        background-color: #e7e7e7;
        border-bottom: 3px solid #f3ffbd;
        /*height: 80px*/
    }

    .navbar-nav .dropdown-menu {
        position: absolute;
        top: 80px;
        background-color: #f3ffbd;
        padding-left: 0
    }


    .navbar-nav .dropdown-menu>li>.title {
        text-indent: 20px;
        text-indent: 2rem;
        color: #1e6887;
        background-color: #f3ffbd
    }

    .navbar-nav .dropdown-menu>li>.title:hover {
        text-decoration: underline;
        background-color: #f3ffbd
    }

    .navbar-nav .dropdown-menu>li.separator {
        font-size: 13px;
        font-size: 1.3rem;
        background-color: #f3ffbd;
        text-transform: uppercase;
        color: #4d4d4d
    }

    .navbar-nav .dropdown-menu>.active>.title {
        background-color: #f3ffbd;
        color: #1e6887
    }

    .navbar-nav .dropdown-menu>.active>.title:hover {
        color: #1e6887
    }
}
.navbar-nav>li>.dropdown-menu{
	border:1px solid #e5e5e5;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	background-color:#1e6887;
	text-align: center;
	top:60px;
	left:0;
	/* width:300px */
}


.navbar-nav>li>.dropdown-menu>li{padding:15px 0;color:#ffffff;text-decoration: underline;text-underline-offset: 5px; }


.dropdown-menu{opacity: 0;padding:0;border:none !important;display:block; height:auto;overflow:hidden;transition: opacity 0.3s ease-in-out; }
.dropdown-menu-active{ opacity: 1;padding:5px 0;height:auto;border:1px solid #ffffff !important}



.navbar-inverse{
	background: none;
}

.navbar-inverse .navbar-nav>li>title{color:#fff}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover{
    color:#fff;background-color:transparent
}


.navbar-nav>li>.dropdown-menu>li{
	padding: 8px 0;

}
.navbar-nav>li,navbar-nav>li>.dropdown-menu>li:hover{
	cursor: pointer;
}


    /* 主导航样式 */
.navbar-nav > li {
  position: relative;
}

.navbar-nav > li > .title {
  padding: 15px;
  color: #ffffff;
  font-size: 15px;
  position: relative;
  transition: all 0.3s;
  height: 60px;
  line-height: 30px;
}

/* 鼠标悬停效果 */
.navbar-nav > li > .title:hover {
  color: #ffffff;
  background: transparent;
}

/* 下划线效果 */
.navbar-nav > li > .title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #1C2B4B;
  transition: width 0.3s;
}

.navbar-nav > li > .title:hover:after {
  width: 100%;
}

/* 下拉菜单样式 */
.navbar-nav > li > .dropdown-menu {
  border: 1px solid #e5e5e5;
  border-radius: 0 0 10px 10px;
  background-color: #1C2B4B;
  text-align: center;
  top: 60px;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  padding: 5px 0;
}

/* 显示下拉菜单 */
.navbar-nav > li:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

/* 下拉菜单项样式 */
.navbar-nav > li > .dropdown-menu > li {
  padding: 15px 0;
}

.navbar-nav > li > .dropdown-menu > li > span {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}
.navbar-nav{margin:14.5px -15px}
.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:22px}


.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}
.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}
.navbar-btn{margin-top:22px;margin-bottom:22px}.btn-group-sm>.navbar-btn.btn,.navbar-btn.btn-sm{margin-top:23.5px;margin-bottom:23.5px}
.btn-group-xs>.navbar-btn.btn,.navbar-btn.btn-xs,.navbar-text{margin-top:29px;margin-bottom:29px}

.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover{color:#5e5e5e;background-color:transparent}
.navbar-default .navbar-nav>li>a,.navbar-default .navbar-text{color:#777}
.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7}
.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover{color:#ccc;background-color:transparent}
.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}
.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}
.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{background-color:#e7e7e7;color:#555}

.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-default .btn-link{color:#777}.navbar-default .btn-link:focus,.navbar-default .btn-link:hover{color:#333}
.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover{color:#ccc}
.navbar-inverse{background-color:#1e6887;border-color:transparent}.navbar-inverse .navbar-brand{color:#fff}.navbar-inverse .navbar-brand:focus,.navbar-inverse .navbar-brand:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#aaa}
.navbar-inverse .navbar-nav>li>a{color:#fff}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>li>a:focus,.navbar-inverse .navbar-nav>li>a:hover
{color:#fff;background-color:transparent}
.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:focus,.navbar-inverse .navbar-nav>.disabled>a:hover{color:#444;background-color:transparent}
.navbar-inverse .navbar-toggle{border-color:#195872}
.navbar-inverse .navbar-toggle:focus,.navbar-inverse .navbar-toggle:hover{background-color:#1e6887}
.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}
.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#18516a}
.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:focus,.navbar-inverse .navbar-nav>.open>a:hover{background-color:transparent;color:#fff}
.navbar-inverse .btn-link,.navbar-inverse .btn-link:focus,.navbar-inverse .btn-link:hover,.navbar-inverse .navbar-link,.navbar-inverse .navbar-link:hover{color:#fff}
.navbar-inverse .btn-link[disabled]:focus,.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:focus,fieldset[disabled] .navbar-inverse .btn-link:hover{color:#444}
.navbar-nav .dropdown.open .caret{transform:rotate(-180deg)}
@media (min-width:1100px){.navbar-text{float:left;margin-left:15px;margin-right:15px}}
@media (min-width:1100px){
    .navbar-left{float:left!important}
    .navbar-right{float:right!important;margin-right:-15px}.navbar-right~.navbar-right{margin-right:0}
}
@media (max-width:1099px){
    .navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}
    .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333;background-color:transparent}
    .navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{color:#555;background-color:#e7e7e7}
    .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#ccc;background-color:transparent}
}
@media (max-width:1099px){
    .navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:transparent}
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#fff}
    .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{color:#fff;background-color:transparent}
    .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,
    .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#444;background-color:transparent}
}

@media (max-width:1099px){
    .navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;box-shadow:none}
    .navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:22px}
    .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}
}
@media (min-width:1100px){
    .navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:29px;padding-bottom:29px}
}

@media screen and (max-width:375px){
    .nav>li>a{padding:10px 2px}.nav>li>a,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{font-size:14px}
}

@media screen and (max-width:1100px){
    .navbar-nav .dropdown-menu>li>a,.navbar-nav>li>a{text-decoration:none;color:#ffffffff}
    .navbar-nav .dropdown-menu>li>a:hover{text-decoration:underline;background-color:#ffffff;color:#000000}
    .navbar-nav .dropdown-menu>li.separator{text-transform:uppercase;color:#ebf1f2;padding-left:15px!important;border-bottom:1px solid hsla(0,0%,100%,.3)!important}.navbar-collapse.in{overflow-y:initial}.navbar-nav{margin:1.5px 0}.navbar-nav>li.open>.dropdown-menu{position:absolute;left:auto;right:0;background:#287ba0;z-index:3;box-shadow:2px 3px 1px 0 #206888}.nav>li{display:inline-block}.nav>li>a{padding:10px 3px}#main-nav+.navbar-right{float:right;margin-top:6px;margin-right:10px}
}
@media screen and (min-width:1100px){
    .navbar-nav>li>a{color:#777;text-decoration:none;transition:none;margin-bottom:0;padding-bottom:0}.navbar-nav>li>a:hover{padding-bottom:0;color:#333;background-color:transparent;border-bottom:3px solid #f3ffbd;}.navbar-nav>.active>a{color:#555;background-color:#e7e7e7;border-bottom:3px solid #f3ffbd;height:80px}.navbar-nav .dropdown-menu{position:absolute;top:80px;background-color:#f3ffbd;padding-left:0}.navbar-nav .dropdown-menu>li>a{color:#ffffff;}
    .navbar-nav .dropdown-menu>li>a:hover{text-decoration:underline;background-color:#ffffff;color:#000000}
    .navbar-nav .dropdown-menu>li.separator{font-size:13px;font-size:1.3rem;background-color:#f3ffbd;text-transform:uppercase;color:#4d4d4d}.navbar-nav .dropdown-menu>.active>a{background-color:#f3ffbd;color:#1e6887}.navbar-nav .dropdown-menu>.active>a:hover{color:#1e6887}}

</style>



            <script>
 $(function(){
  // 导航菜单hover效果
  $("#main-nav li").hover(function(){
    // 鼠标进入
    var $submenu = $(this).find("ul");
    if($submenu.length > 0){
      $submenu.stop().slideDown(50);
    }
  }, function(){
    // 鼠标离开
    var $submenu = $(this).find("ul");
    if($submenu.length > 0){
      $submenu.stop().slideUp(200);
    }
  });
});

            </script>
	          <!--  <div class="nav navbar-nav navbar-right">
	                <ul id="login-nav" class="nav navbar-nav navbar-main-menu nav"><li><a href="/login">Login</a></li>

					</ul>
						 </div> -->

<!--	            <div class="nav navbar-nav navbar-right">-->
<!--                  <form id="search-form" class="navbar-form" action="/search" method="get">-->
<!--                  <input type="hidden" name="version" value="2.0">-->
<!--                  <input type="hidden" name="type" value="api">-->
<!--                  <div class="form-group nospace">-->
<!--                  <div class="input-group">-->
<!--                  <input type="text" class="form-control" id="search" name="q" placeholder="Search API…" autocomplete="off" value="" style="width: 226px;">-->
<!--                  </div>-->
<!--                  </div>-->
<!--                  <div id="search-resultbox" style="width: 350px; display: none;"></div>-->
<!--                  </form>-->
<!--              </div>-->


	        </div>
	    </div>
	</header>




